<template>
  <div>
    <h2>计算属性 当做属性使用 本身是函数</h2>
    <ElButton>{{ person.age }}</ElButton>
    <ElButton>{{ some }}</ElButton>
    <ElButton type="warning" v-for="(e, i) in any" :key="i"> {{ e.name }}__{{ e.age }}</ElButton>
    <ElButton type="danger" @click="addPerson()">添加一个人</ElButton>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'RoundSeventh',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      person: {
        name: 'zhangsan',
        age: 11
      },
      human: [
        {
          name: 'zhangsan',
          age: 11
        },
        {
          name: 'lisi',
          age: 70
        }
      ],
      limit: 18
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
    // some: this.person.age - 10
    some() {
      return this.person.age - 10
    },
    any() {
      return this.human.filter((e) => e.age < this.limit)
    }
  },
  beforeCreate() {
    console.log("beforeCreate")
  },
//   create管 js代码初始化 document.queryselector $ref
  created() {
    console.log("created")
    console.log(this.person)
  },
  beforeMount() {
    console.log("beforeMount")
  },
//  mount 管加载html标签 document.queryselector $ref
  mounted() {
    console.log("mounted")
  },
  methods: {
    // sampleM() {},
    addPerson() {
      this.human.push({
        name: 'wangwu',
        age: 8
      })
      console.log(this.some)
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
